<template>
  <section class="building-showcase" data-aos="fade-up">
    <div class="building-bg">
      <img src="@/assets/images/bulding-bg.jpg" alt="企业建筑" class="bg-image">
      <div class="bg-overlay"></div>
    </div>
    
    <div class="container">
      <div class="showcase-content">
        <!-- 左侧文本说明 -->
        <div class="text-section">
          <h2 class="section-title">{{ $t('buildingShowcase.title') }}</h2>
          <p class="section-desc">{{ $t('buildingShowcase.description') }}</p>
          <div class="features-list">
            <div class="feature-item" v-for="(feature, index) in features" :key="index">
              <i class="iconfont" :class="feature.icon"></i>
              <span class="feature-text">{{ feature.text }}</span>
            </div>
          </div>
          <el-button type="default" class="learn-more-btn" @click="$router.push('/about-furui')">
            {{ $t('common.learnMore') }}
            <i class="iconfont icon-arrow-right"></i>
          </el-button>
        </div>
        
        <!-- 右侧指标卡片 -->
        <div class="metrics-section">
          <div class="metric-card" v-for="(metric, index) in metrics" :key="index" data-aos="zoom-in" :data-aos-delay="index * 200">
            <div class="metric-icon">
              <i class="iconfont" :class="metric.icon"></i>
            </div>
            <div class="metric-value">
              <span class="counter" :data-target="metric.value">{{ metric.prefix }}{{ currentValues[index] }}{{ metric.suffix }}</span>
            </div>
            <div class="metric-label">{{ metric.label }}</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import AOS from 'aos'

// 响应式状态
const currentValues = ref([0, 0, 0])
const animationInProgress = ref(false)

// 指标数据
const metrics = [
  {
    icon: 'icon-area',
    value: 560000,
    prefix: '',
    suffix: '㎡',
    label: '占地面积'
  },
  {
    icon: 'icon-building',
    value: 320000,
    prefix: '',
    suffix: '㎡',
    label: '建筑面积'
  },
  {
    icon: 'icon-production',
    value: 150,
    prefix: '',
    suffix: '万吨/年',
    label: '年产量'
  }
]

// 企业特点
const features = [
  {
    icon: 'icon-certification',
    text: 'ISO9001国际质量体系认证'
  },
  {
    icon: 'icon-environment',
    text: '绿色环保生产基地'
  },
  {
    icon: 'icon-technology',
    text: '智能化生产管理系统'
  },
  {
    icon: 'icon-safety',
    text: '国家安全生产标准达标'
  }
]

// 数字增长动画
const animateCounter = (element, target, duration = 2000) => {
  return new Promise((resolve) => {
    const start = 0
    const increment = target / (duration / 16)
    let current = start
    
    const updateCounter = () => {
      current += increment
      if (current >= target) {
        current = target
        clearInterval(timer)
        resolve()
      }
      
      // 格式化数字（添加千分位）
      let formattedValue = Math.floor(current).toLocaleString()
      element.textContent = formattedValue
    }
    
    const timer = setInterval(updateCounter, 16)
  })
}

// 检查元素是否在视口中
const isInViewport = (el) => {
  const rect = el.getBoundingClientRect()
  return (
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.75 &&
    rect.bottom >= 0
  )
}

// 处理滚动事件
const handleScroll = () => {
  if (!animationInProgress.value && isInViewport(document.querySelector('.building-showcase'))) {
    animationInProgress.value = true
    startAnimation()
  }
}

// 开始动画序列
const startAnimation = async () => {
  // 重置当前值
  currentValues.value = [0, 0, 0]
  
  // 按顺序动画每个数字
  for (let i = 0; i < metrics.length; i++) {
    const target = metrics[i].value
    const element = document.querySelectorAll('.counter')[i]
    
    // 使用requestAnimationFrame确保DOM更新
    await new Promise(resolve => {
      requestAnimationFrame(() => {
        animateCounter(element, target).then(resolve)
      })
    })
    
    // 更新响应式状态
    currentValues.value[i] = target
  }
}

onMounted(() => {
  // 初始化AOS
  AOS.init({
    duration: 1000,
    once: true
  })
  
  // 初始检查元素是否在视口内
  if (isInViewport(document.querySelector('.building-showcase'))) {
    startAnimation()
  } else {
    // 添加滚动监听
    window.addEventListener('scroll', handleScroll)
  }
})

onUnmounted(() => {
  // 移除滚动监听
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped lang="scss">
.building-showcase {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  
  .building-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    .bg-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.5);
    }
    
    .bg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(10, 36, 99, 0.9) 0%, rgba(10, 36, 99, 0.7) 100%);
    }
  }
  
  .showcase-content {
    display: flex;
    align-items: center;
    gap: 60px;
    
    @media (max-width: 991px) {
      flex-direction: column;
      gap: 40px;
    }
  }
  
  // 左侧文本区域
  .text-section {
    flex: 1;
    color: #ffffff;
    
    .section-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 25px;
      position: relative;
      padding-bottom: 15px;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 3px;
        background-color: #D8315B;
      }
    }
    
    .section-desc {
      font-size: 1.1rem;
      line-height: 1.6;
      margin-bottom: 30px;
      color: rgba(255, 255, 255, 0.9);
    }
    
    .features-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin-bottom: 35px;
      
      @media (max-width: 575px) {
        grid-template-columns: 1fr;
      }
      
      .feature-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.95rem;
        
        .iconfont {
          color: #D8315B;
          font-size: 18px;
        }
      }
    }
    
    .learn-more-btn {
      padding: 12px 25px;
      background-color: transparent;
      border: 1px solid #ffffff;
      color: #ffffff;
      border-radius: 0;
      font-size: 15px;
      transition: all 0.3s ease;
      
      &:hover {
        background-color: #ffffff;
        color: #0A2463;
        border-color: #ffffff;
      }
      
      .iconfont {
        margin-left: 8px;
      }
    }
  }
  
  // 右侧指标区域
  .metrics-section {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    
    @media (max-width: 768px) {
      grid-template-columns: repeat(1, 1fr);
    }
    
    .metric-card {
      background-color: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 8px;
      padding: 30px 20px;
      text-align: center;
      transition: all 0.5s ease;
      border: 1px solid transparent;
      
      &:hover {
        transform: translateY(-10px);
        background-color: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
      }
      
      .metric-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        
        .iconfont {
          font-size: 28px;
          color: #D8315B;
        }
      }
      
      .metric-value {
        margin-bottom: 10px;
        
        .counter {
          font-size: 2.5rem;
          font-weight: 700;
          color: #ffffff;
          line-height: 1;
        }
      }
      
      .metric-label {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.85);
      }
    }
  }
}

// 响应式样式
@media (max-width: 991px) {
  .building-showcase {
    padding: 70px 0;
    
    .text-section {
      .section-title {
        font-size: 2rem;
      }
    }
  }
}

@media (max-width: 575px) {
  .building-showcase {
    padding: 50px 0;
    
    .text-section {
      .section-title {
        font-size: 1.7rem;
      }
      
      .section-desc {
        font-size: 1rem;
      }
    }
    
    .metrics-section {
      gap: 15px;
      
      .metric-card {
        padding: 25px 15px;
        
        .metric-icon {
          width: 50px;
          height: 50px;
          
          .iconfont {
            font-size: 24px;
          }
        }
        
        .metric-value {
          .counter {
            font-size: 2rem;
          }
        }
      }
    }
  }
}
</style>